<template>
    <!--顶部导航菜单 start-->
    <ExamMenu/>
    <!--顶部导航菜单 end-->
    <el-container class="personal-container">
      <!-- 左侧导航 -->
      <el-aside width="240px" class="left-aside">
        <div class="user-info">
          <div class="avatar-wrapper">
            <el-upload
      class="avatar-uploader"
      :action="uploadURL"  
      :show-file-list="false"
      :headers="header"
      :before-upload="beforeAvatarUpload"
      :on-success="handleAvatarSuccess"
    >
      <el-avatar class="avatar" :size="80" :src="avatarUrl">
        <!-- 默认显示内容，当没有头像时 -->
        <span class="default-text" v-if="!avatarUrl">点击上传</span>
      </el-avatar>
    </el-upload>
          </div> 
          <h3 class="name">{{ name }}</h3>
        </div>
  
        <el-menu
          :default-active="activeMenu"
          class="side-menu"
          @select="handleMenuSelect"
        >
        <!--子菜单项 end-->
        <el-menu-item 
        v-for="item in menuItems"
        :key="item.index"
        :index="item.index"
      >
        <el-icon><component :is="item.icon" /></el-icon>
        <span class="menu-text">{{ item.label }}</span>
        <div class="active-indicator"></div>
      </el-menu-item>
      <!--子菜单项 end-->
        </el-menu>
      </el-aside>
  
      <!-- 右侧内容 -->
      <el-main class="right-main">
         <!-- 组件切换动画 -->
    <transition 
      name="slide-fade"
      mode="out-in"
      @enter="enterAnimation"
    >
      <component 
        :is="currentComponent" 
        :key="activeMenu"
        class="content-wrapper"
      />
    </transition>
      </el-main>
    </el-container>
    <!--底部 start-->
    <ExamFooter/>
    <!--底部 end-->
    
  </template>
  
  <script setup lang="ts">
  import { ref, shallowRef,onMounted,reactive,provide } from 'vue'
  import { useUserStore } from '../store/user';
  import {
    User,
    Notebook,
    EditPen,
    Document,
    School,
    Tickets,
    Watch,
    GoldMedal,
    Bell,
    Memo
  } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

  // 动态组件
  import Profile from '@/components/center/student/Profile.vue'
  import TeacherDashboard from '@/components/center/teacher/TeacherDashboard.vue'
  // 获取存放在pinia中的用户信息
  const userStore = useUserStore()
  const {name,avatar,roles,token} = userStore
  const avatarUrl = ref(avatar)
  // 定义上传图片的URL
  const uploadURL = "/api/file/uploadImage"
 // 定义上传图片头部
 const header = reactive({
    Authorization: token || ''
  })


  // 上传头像前
  const beforeAvatarUpload = (file: File) => {
    const isImage = file.type.startsWith('image/');
      const isLt2M = file.size / 1024 / 1024 < 2;

    if (!isImage) {
      ElMessage.error('只能上传图片格式!')
    }
    if (!isLt2M) {
      ElMessage.error('上传头像图片大小不能超过 2MB!')
    }
    return isImage && isLt2M;
  }

  const handleAvatarSuccess = (res:any,file:any) => {
    console.log('res:',res)
    const {code,data,msg} = res
    if (code !== 1) {
      ElMessage.error(msg)
      return
    }
    ElMessage.success('上传成功')
    // 更新用户头像
    userStore.updateAvatar('api/localFile/'+data)

  }

  const activeMenu = ref(roles.includes('student')  ? 'profile' : 'teacher-dashboard')

  const currentComponent = shallowRef(roles.includes('student')  ? Profile : TeacherDashboard
)
  // 菜单
  const menuItems = ref([])
  // 学生角色菜单数据
  const studentMenuItems = [
  { index: 'profile', label: '个人信息', icon: User }
]

  // 老师菜单数据
  const teacherMenuItems = [
  { index: 'teacher-dashboard', label: '个人信息', icon: User }
]


 

  const componentsMap: { [key: string]: any } = {
    profile: Profile,
    'teacher-dashboard':TeacherDashboard
  }
  
  // 菜单选择事件
  const handleMenuSelect = (key: string) => {
    // 当前活动菜单
    activeMenu.value = key
    // 动态组件切换
    currentComponent.value = componentsMap[key]
  }
  // 提供一个方法给子组件调用
  provide('handleMenuSelect', handleMenuSelect)


// 动画逻辑
// 动画控制逻辑
const enterAnimation = (el: Element) => {
  const cards = el.querySelectorAll('.el-card')
  const rows = el.querySelectorAll('tr')
  const pagination = el.querySelector('.el-pagination')

  cards.forEach((card, index) => {
    setTimeout(() => {
      card.classList.add('animated-in')
    }, index * 50)
  })

  rows.forEach((row, index) => {
    setTimeout(() => {
      row.classList.add('animated-in')
    }, index * 30)
  })

  if (pagination) {
    setTimeout(() => {
      pagination.classList.add('animated-in')
    }, 200)
  }
}

// 组件挂载完成
onMounted(() => {
    menuItems.value = roles.includes('student')  ? studentMenuItems : teacherMenuItems
})


  </script>
  
  <style lang="scss" scoped>
  .personal-container {
    height: 100vh;
    background: #f5f7fa;
    margin: 0 auto;
  
    .left-aside {
  background: linear-gradient(
    135deg, 
    rgba(64, 158, 255, 0.1) 0%, 
    rgba(255, 255, 255, 1) 100%
  );
  box-shadow: 2px 0 12px rgba(64, 158, 255, 0.1);
  transition: all 0.3s ease;

  .user-info {
    padding: 30px 20px;
    text-align: center;
    background: linear-gradient(
      45deg,
      rgba(64, 158, 255, 0.15) 0%,
      rgba(51, 126, 204, 0.1) 100%
    );
    margin: 10px;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);

    .avatar-wrapper {
      position: relative;
      display: inline-block;
      &::before {
        content: '';
        position: absolute;
        top: -5px;
        left: -5px;
        right: -5px;
        bottom: -5px;
        background: linear-gradient(
          45deg,
          rgba(64, 158, 255, 0.3),
          rgba(51, 126, 204, 0.2)
        );
        border-radius: 50%;
        z-index: 0;
        animation: avatarGlow 3s ease-in-out infinite alternate;
      }

      .avatar {
        position: relative;
        z-index: 1;
        transition: transform 0.3s ease;
        border: 2px solid white;
        box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);

        &:hover {
          transform: scale(1.05) rotate(5deg);
        }
      }
    }

    .name {
      margin: 15px 0 5px;
      color: var(--el-color-primary-dark-2);
      font-size: 18px;
      font-weight: 600;
      text-shadow: 0 2px 4px rgba(64, 158, 255, 0.1);
    }

    .email {
      color: #909399;
      font-size: 12px;
      transition: all 0.3s ease;
      &:hover {
        color: var(--el-color-primary);
        transform: translateX(5px);
      }
    }
  }

  .side-menu {
    background: transparent;
    border-right: none;
    padding: 0 10px;

    :deep(.el-menu-item) {
      height: 50px;
      margin: 6px 0;
      border-radius: 8px;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      overflow: hidden;

      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(
          90deg,
          transparent,
          rgba(64, 158, 255, 0.15),
          transparent
        );
        transition: left 0.6s ease;
      }

      &:hover {
        transform: translateX(8px);
        background: rgba(64, 158, 255, 0.08);

        &::before {
          left: 100%;
        }

        .menu-text {
          color: var(--el-color-primary);
        }

        .el-icon {
          transform: scale(1.1);
        }
      }

      &.is-active {
        background: rgba(64, 158, 255, 0.12) !important;
        box-shadow: inset 4px 0 0 var(--el-color-primary);

        .menu-text {
          font-weight: 600;
          color: var(--el-color-primary);
        }

        .el-icon {
          color: var(--el-color-primary);
        }

        .active-indicator {
          opacity: 1;
          transform: translateX(0);
        }
      }

      .el-icon {
        margin-right: 8px;
        transition: all 0.3s ease;
      }

      .menu-text {
        transition: color 0.3s ease;
      }

      .active-indicator {
        position: absolute;
        right: 10px;
        width: 8px;
        height: 8px;
        background: var(--el-color-primary);
        border-radius: 50%;
        opacity: 0;
        transform: translateX(10px);
        transition: all 0.3s ease;
        box-shadow: 0 0 8px rgba(64, 158, 255, 0.3);
      }
    }
  }
}

@keyframes avatarGlow {
  0% {
    opacity: 0.6;
    transform: scale(0.95);
  }
  100% {
    opacity: 0.8;
    transform: scale(1.05);
  }
}
  
    // 右侧 start
    .right-main {
      padding: 30px;
      background: #f5f7fa;
       // 组件切换动画
  .slide-fade-enter-active {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .slide-fade-leave-active {
    transition: all 0.2s cubic-bezier(0.4, 0, 1, 1);
  }

  .slide-fade-enter-from {
    opacity: 0;
    transform: translateX(30px);
  }

  .slide-fade-leave-to {
    opacity: 0;
    transform: translateX(-30px);
  }

   // 内容加载动画 start

.content-wrapper {
  :deep() {
    .el-card {
      transition: all 0.4s ease;
      transform: translateY(20px);
      opacity: 0;
      animation: cardEnter 0.4s ease forwards;

      @for $i from 1 through 10 {
        &:nth-child(#{$i}) {
          animation-delay: $i * 0.05s;
        }
      }
      &.animated-in {
        transform: translateY(0);
        opacity: 1;
      }
    }

    tr {
      opacity: 0;
      animation: rowEnter 0.3s ease forwards;
      
      @for $i from 1 through 20 {
        &:nth-child(#{$i}) {
          animation-delay: $i * 0.03s;
        }
      }
    }

    .el-pagination {
      animation: fadeIn 0.3s ease 0.2s forwards;
    }
  }
}
   // 内容加载动画 end


    }
    // 右侧 end
  }

  @keyframes cardEnter {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes rowEnter {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

/* 滚动条美化 */
::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }
    ::-webkit-scrollbar-track {
      background: #f1f1f1;
      border-radius: 4px;
    }
    ::-webkit-scrollbar-thumb {
      background: #409EFF;
      border-radius: 4px;
      border: 2px solid transparent;
      background-clip: content-box;
    }
    ::-webkit-scrollbar-thumb:hover {
      background: #66b1ff;
    }
    
    /* Firefox 兼容 */
    @supports (scrollbar-color: red blue) {
      * {
        scrollbar-color: #409EFF #f1f1f1;
        scrollbar-width: thin;
      }
    }
  </style>